﻿@model _2009035.Models.Employee

<div class="span10">
    <table style="width: 60%; border: none;">
        <colgroup>
            <col style="width: 20%">
            <col style="width: 25%">
        </colgroup>
        <tr>
            <td>
                <div id="dvImageResize" style="text-align: center; height: 200px; width: 200px">
                    <img src="@Url.Action("Show", "Image")" style="height: inherit; width: inherit;" />
                </div>
            </td>
            <td style="vertical-align: bottom">
                <h2 class="heading">@string.Format("{0} {1}", Model.firstName, Model.lastName)</h2>
            </td>
        </tr>
        <tr>
            <td>
                <div style="position: relative;" id="pnlUpload">
                    <button  id="btnUpload" class="ui-button-primary"> Change Picture</button>
                    <br />
                    <br />
                    <div style="position: absolute; top: 4px; left: 3px; visibility:hidden">
                        <input id="fuFileUploader" name="file_upload" type="file" />
                    </div>
                </div>
                @*<button id="btnUploadImage" class="ui-button-primary"> Change  </button>*@
            </td>
        </tr>
    </table>

    <table style="width: 100%">
        <colgroup>
            <col style="width: 10%" />
            <col style="width: 30%" />
        </colgroup>
        <tbody>
            <tr>
                <td>
                    <div class="ui-state-default ui-corner-all">
                        <p>
                            <strong>Employee Number</strong>
                        </p>
                    </div>
                </td>
                <td>

                    <div class="ui-state-highlight ui-corner-all">
                        <p id="pEmployeeNumber">@Model.employeeNumber</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="ui-state-default ui-corner-all">
                        <p>
                            <strong>Date of birth</strong>
                        </p>
                    </div>
                </td>
                <td>

                    <div class="ui-state-highlight ui-corner-all">
                        <p>@Model.birthDate.ToShortDateString()</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="ui-state-default ui-corner-all">
                        <p>
                            <strong>Gender</strong>
                        </p>
                    </div>
                </td>
                <td>

                    <div class="ui-state-highlight ui-corner-all">
                        <p>@Model.gender</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="ui-state-default ui-corner-all">
                        <p>
                            <strong>Date Joined</strong>
                        </p>
                    </div>
                </td>
                <td>

                    <div class="ui-state-highlight ui-corner-all">
                        <p>@Model.hireDate.ToShortDateString()</p>
                    </div>
                </td>
            </tr>
        </tbody>

    </table>
    <table>
        <tr>
            <td colspan="2">
                <div id="dvMoreDetail">
                    <input type="radio" id="rdoSalary" name="radio" value="0" /><label for="rdoSalary">Salary
                        History</label>
                    <input type="radio" id="rdoDepartment" name="radio" value="1" /><label for="rdoDepartment">Title
                        History</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvAdditional"></div>
            </td>
        </tr>
    </table>
</div>
<br />
    <div id="dvId">
        <div id="pnlUploadedImage">          
            <input type="button" id="btnCrop" onclick="javascript: cropImage();" value="Crop Image" />
            <input type="button" id="btnResize" onclick="javascript: resizeImage();" value="Resize Image" />
            <label id="lblMethodError" style="display:none"></label>
            <br />
            <img id="imgUploadedImage" alt="Uploaded Image" />
        </div>
        <div id="pnlNewImage">
            <h2>Modified image</h2>

             <img id="imgNewImage" alt="Uploaded Image" style="text-align: center; height: 200px; width: 200px"/>
          
        </div>
        </div>